<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="../static/plugins/swiper/css/swiper.min.css"
    />
    <script
      type="application/javascript"
      src="../static/plugins/swiper/js/swiper.min.js"
    ></script>

    <style>
      .swiper-container {
        width: 100%;
        height: 100px;
        background: #00ff00;
      }
    </style>
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <div class="swiper-pagination"></div>
      <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
    </div>

    <script>
      var mySwiper = new Swiper(".swiper-container", {
        pagination: {
          el: ".swiper-pagination",
        },
      });
    </script>
  </body>
</html>
